import './App.css';
import React from 'react';
import PropTypes from 'prop-types';
import Home from "./pages/home/index";
// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }
class Demo extends React.Component {
    static  propTypes = {
        a: PropTypes.number,
        b: PropTypes.number.isRequired,
    }
    static  defaultProps = {
        a: 1,
        b: 2,
    }
    state = {
        count: 1,
        a: this.props.a,
        b: this.props.b
    }
    add = () => {
        let count = this.state.count;
        let a = this.state.a
        this.setState({count: count + 1})
        this.setState({a: a + 1})
    }

    render () {
        const {a, b} = this.state
        return (
            <div>
                <p>a:{a}</p>
                <p>b:{b}</p>
                <p>
                    <button onClick={this.add}>
                        加一
                    </button>
                </p>
            </div>
        )
    }
}

function FuncDemo (props) {
    const {name, age} = props
    return (
        <div>
            <div>姓名：{name}</div>
            <div>年龄：{age}</div>
        </div>
    )
}

export class InputDemo extends React.Component {
    state = {
        userName: "张三"
    }

    constructor (props) {
        super(props);
        this.input1 = React.createRef()
    }

    showData = () => {
        this.input1.current.value = 999999
    }
    showData2 = () => {
        console.log('--->input2', this.input2.value)
    }

    render () {
        const {userName} = this.state
        return (
            <div className="">
                <p>
                    <span>内联 ref:</span>
                    <input ref={this.input1} type="text" defaultValue={userName}/>
                    <button onClick={this.showData}>点击提示左侧数据</button>
                </p>
                <p>
                    <span>回调函数 ref:</span>
                    <input ref={c => this.input2 = c} type="text"/>
                    <button onClick={this.showData2}>点击提示左侧数据</button>
                </p>
            </div>
        )
    }
}

class App extends React.Component {
    render () {
        return (
                <div className="App">
                    <Home/>
                </div>
        )
    }
}

export default App;
/**
 * first_demo/node_modules/react-refresh/cjs/react-refresh-runtime.development.js
 * 488 行注释
 * */
